<script setup lang="ts" name="comments">
import { ref, onMounted } from 'vue'
import useArtComments from '@/components/index/artical/hooks/artComments'
import type { ArticleComments } from '@/types/loginType'
const { showSend, addAcc, addSendComment, ArtCommentSend } = useArtComments()
const props = defineProps<{
  comments: ArticleComments[] | undefined
}>()
onMounted(() => {})
</script>

<template>
  <ul>
    <li v-for="comment in comments" :key="comment.id">
      <div class="header">
        <img :src="comment.userImg" alt="" />
      </div>
      <div class="content">
        <b>{{ comment.name }}</b>
        <span>
          <p>{{ comment.msg }}</p>
        </span>
        <div ref="telePortTarget">
          <span>
            <span>
              <i
                :class="{ isAcc: comment.isAcc }"
                @click="addAcc(comment.id, $event.target as HTMLAnchorElement)"
              >
                <svg stroke="currentColor" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="  M26.002,13H20V7.026C20,5.907,19.093,5,17.974,5c-0.615,0-1.198,0.28-1.582,0.76L9,15l0.001,0L9,15v10l3,2h12.473  c0.892,0,1.676-0.592,1.921-1.451l2.49-8.725C29.43,14.908,27.993,13,26.002,13z"
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-miterlimit="10"
                    stroke-width="2"
                  />
                  <rect
                    fill="none"
                    height="14"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-miterlimit="10"
                    stroke-width="2"
                    width="6"
                    x="3"
                    y="13"
                  />
                </svg>
              </i>
            </span>
            <span>{{ comment.accAll }}</span>
          </span>
          <span>{{ comment.time }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<style scoped lang="less">
.isAcc {
  color: pink;
}
ul {
  border-top: 2px dashed var(--color2);

  width: 100%;
  list-style: none;
  color: var(--color2);

  li {
    padding: 20px 0;
    border-bottom: 1px dashed var(--color2);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 80px 7fr;
    grid-auto-rows: minmax(80px, max-content);
    > .header {
      justify-self: center;
      > img {
        width: 46px;
        height: 46px;
        border-radius: var(--radius);
      }
    }
    > .content {
      height: 100%;
      align-self: center;
      > b {
        display: block;
        margin: 6px 0;
        color: var(--color3);
      }
      > span {
        display: block;
        min-height: 60px;
        > p {
          line-height: 24px;
        }
      }
      > div {
        margin-top: 16px;
        text-align: right;

        > span {
          line-height: 20px;
          margin: 0 14px;

          > span {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            > i {
              cursor: pointer;
              display: inline-block;
              width: 20px;
              height: 20px;
              > svg {
                width: 20px;
                height: 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
